<template>
  <div id="leftPanel">
    <div class="title-wrap">
      <h3 class="clearfix">
        <dl class="fl">
          <dt>乌鲁木齐市</dt>
          <dd v-if="wulumuqishisum" class="unit-gongqing">{{wulumuqishisum}}</dd>
        </dl>
        <dl class="fl">
          <dt>城镇开发边界</dt>
          <dd v-if="kaifabianjiesum" class="unit-gongqing">{{kaifabianjiesum}}</dd>
        </dl>
        <dl class="fl">
          <dt>建成区</dt>
          <dd v-if="jiancehngqusum" class="unit-gongqing">{{jiancehngqusum}}</dd>
        </dl>
      </h3>
    </div>
    <div style="display: block;">
      <div id="domCartleft1" ref="domCartleft1"></div>
      <div id="domCartleft2" ref="domCartleft2"></div>
    </div>


  </div>
</template>
<script>
  import {getStatldflsum, getxzqhStatldflsum } from "../../api/ldfl/ldfl.js";
  import * as echarts from "echarts";
  import { getDicts } from "../../api/system/dict/data";
  import { EleResize } from "@/utils/esresize";
  export default {
    name: 'leftPanel',
    props: {
      paramObj: { default: () => { } },
    },
    data() {
      return {
        wulumuqishi: undefined,
        wulumuqishisum: undefined,
        jiancehngqu: undefined,
        jiancehngqusum: undefined,
        jianchengquwaisum: undefined,
        kaifabianjiesum:undefined,
        xzqhfl:undefined,
        piechartdata:undefined,
      }
    },
    mounted() {
      let _self = this;
      setTimeout(() => {
        _self.getData();
        }, 800)
      let pageHeight = document.documentElement.clientHeight;
      this.$refs.domCartleft1.style.height = pageHeight * 0.45 + 'px';
      this.$refs.domCartleft2.style.height = pageHeight * 0.33 + 'px';
    },
    methods: {
      async getData() {
        let _self = this
        // 固定数据
        // 乌鲁木齐市数据
        let query_wulumuqisum = { xzqfanwei: "行政区内" }
        _self.wulumuqishi = await getStatldflsum(query_wulumuqisum)
        _self.wulumuqishisum = _self.wulumuqishi.data[0].sumarea
        // 城镇开发边界数据
        let query_kaifabianjie = { xzqfanwei: "城镇开发边界内" }
        _self.kaifabianjiesum = await getStatldflsum(query_kaifabianjie)
        _self.kaifabianjiesum = _self.kaifabianjiesum.data[0].sumarea
        // 建成区数据
        let query_jiancehngqu = { xzqfanwei: "建成区内" }
        _self.jiancehngqu = await getStatldflsum(query_jiancehngqu)
        _self.jiancehngqusum = _self.jiancehngqu.data[0].sumarea
        // 建成区外数据
        _self.jianchengquwaisum = (_self.wulumuqishisum - _self.jiancehngqusum).toFixed(2)
        // 变更数据
        _self.Chart2Data1()
      },
      /**
      * @description: 初始化统计图1
      * @return {*}
      */
      // 按行政区统计绿地类型总值信息
      async Chart2Data1() {
        let _self = this;
        // 先构建用于查询数据的查询参数对象
        let query = { xzqfanwei: _self.paramObj.xzqfanwei}
        let xzqhfldata = await getxzqhStatldflsum(query);
        _self.xzqhfl = [];
        _self.xzqhfl = xzqhfldata.data;
        // 按照行政区划名称排序
        let xzqhchaptersTransOrder = ['天山区', '沙依巴克区', '新市区','水磨沟区','经开区','达坂城区','米东区','乌鲁木齐县','甘泉堡']
        // let ldtype = _self.ldtype
        function customSortMultiDimensionalArray(arr, propertyName, order) {
          return arr.sort((a, b) => {
            const indexA = order.indexOf(a[propertyName]);
            const indexB = order.indexOf(b[propertyName]);
            return indexA - indexB;
          });
        };
        customSortMultiDimensionalArray(_self.xzqhfl, 'xzqh', xzqhchaptersTransOrder);
        console.log(_self.xzqhfl);

        _self.initChart1();
        _self.initChart2();
      },
      /**
      * @description: 初始化柱状图1
      * @return {*}
      */
      async initChart1() {
        let _self = this;
        var chartDom = document.getElementById('domCartleft1');

        var myChart1 = echarts.init(chartDom, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
      // 图表自适应
        const listener = function () {
          myChart1.resize();
        };
        EleResize.on(domCartleft1, listener);

        let dataAxis = [];
        let dataYxis  =[];
        _self.xzqhfl.forEach(e => {
          dataAxis.push(e.xzqh);
          dataYxis.push(e.sumarea);
        });
        // console.log(dataYxis);
        let yMax = 500;
        let dataShadow = [];
        for (let i = 0; i < dataYxis.length; i++) {
          dataShadow.push(yMax);
        }
        let option = {
          backgroundColor: '',//设置无背景色
          // backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
          title: {
            text: '各区县绿地面积',
            // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom',
            textStyle:{
              color:'#02C874',
              fontWeight: 'bold', // 标题字体的粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontFamily: 'DigifaceWide', // 字体系列
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            backgroundColor: 'rgba(255,255,255,0.8)', // 悬浮框背景色
            borderColor: '#000', // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: { // 悬浮框文字样式
              color: '#000',
              fontSize: 12
            }
          },
          // toolbox: {
          //   feature: {
          //     dataView: { show: true, readOnly: false },
          //     magicType: { show: true, type: ['line', 'bar'] },
          //     restore: { show: true },
          //     saveAsImage: { show: true }
          //   },
          // },
          xAxis: {
            data: dataAxis,
            axisLabel: {
              // inside: true,
              fontSize:'12px',
              color: '#FFFFFF',
              rotate: 45 // X轴标签倾斜 45 度
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 10
          },
          yAxis: {
            name: "面积/公顷",
            nameTextStyle:{
                color:"#FFFFFF",
                fontSize:12,
                },
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              color: '#FFFFFF',
            }
          },
          dataZoom: [
            {
              type: 'inside'
            }
          ],
          series: [
            {
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 公顷';
                }
              },
              showBackground: true,
              itemStyle: {
                // 设置柱形图圆角，数组中的四个数字分别对应左上角，右上角，右下角，左下角
                borderRadius: [10, 10, 0, 0],
                // 线性渐变方式:LinearGradient前四个分参数别代表右,下,左,上,数值0-1
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#50c878' },
                    { offset: 0.5, color: '#00B98C' },
                    { offset: 1, color: '#008B69' }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#50c878' },
                    { offset: 0.5, color: '#008B69' },
                    { offset: 1, color: '#2378f7' }
                  ])
                }
              },
              data: dataYxis
            }
          ]
        };
        option && myChart1.setOption(option);
      },
            /**
      * @description: 初始化饼状图2
      * @return {*}
      */
      async initChart2() {
        let _self = this;
        var chartDom2 = document.getElementById('domCartleft2');
        var myChart2 = echarts.init(chartDom2, null, {
          renderer: 'canvas',
          useDirtyRect: false
        });
        // 图表自适应
        const listener = function () {
          myChart2.resize();
        };
        EleResize.on(domCartleft2, listener);
        // 利用 for 循环将将数组中的元素提取到 element中
        _self.piechartdata = []
        // console.log(_self.xzqhfl.length);
        for (let index = 0; index < _self.xzqhfl.length; index++) {
          const element = _self.xzqhfl[index];
          _self.piechartdata.push({
            // 对于道路等级的的名称命名，如果找到匹配的字典数据，则使用字典中的标签 dictLabel，
            name:  element.xzqh,
            value: element.sumarea
          });
        };
        var app = {};
        var option;
        option = {
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} " + " 公顷 "+ '({d}%)',
            backgroundColor: 'rgba(255,255,255,0.8)', // 悬浮框背景色
            borderColor: '#000', // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: { // 悬浮框文字样式
              color: '#000',
              fontSize: 12
            }
          },
          legend: {
            // type:'scroll',
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '58%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: _self.piechartdata,
              label: {
                show: true,
                position: 'inner',
                formatter: '{d}%',
                distance: 0.7, //这项是标识距离中心点的距离
                align: 'center',
                baseline: 'middle',
                fontFamily: '微软雅黑',
                fontSize: 10,
                fontWeight: 'bolder',
                color: '#ffff',
                labelLine: {
                  show: false
                }
              },
            }
          ]
        };
        option && myChart2.setOption(option);
      },
    },
  }
</script>
<style>
  .fl {
    float: left
  }

  dl,
  dt,
  dd {
    padding: 0;
    margin: 0;
    list-style: none
  }

  .title-wrap {
    display: block;
  }

  .title-wrap h3 dl {
    width: 30%;
    border-left: 5px solid #02C874;
    margin-left: 2%;
  }

  .title-wrap h3 dl dt {
    font-size: 20px;
    font-weight: bold;
    color: #02C874;
    margin-left: 2%;
    margin-bottom: 5px;
  }

  .title-wrap h3 dl dd {
    font-family: DigifaceWide;
    font-size: 20px;
    color: #FFF233;
    margin-left: 4%;
}

  .title-wrap .unit-gongqing:after {
    display: inline-block;
    margin-left: 4%;
    font-size: 12px;
    color: #fff;
    content: '公顷';
  }
</style>
